<template>
	<div>
		<div>
			<table border="0px">
				<el-row>
					
					<i class="el-icon-search" style="margin-left: 5px;;">筛选查询</i>
					<el-input placeholder="请输入类型名称查询" v-model="bbb.propertyName" style="width: 230px;margin-left: 505px;"></el-input>
					&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" @click="select">查询</el-button>
				</el-row>
				<el-divider></el-divider>
			</table>


			<table border="0px">
				<el-row>
					<i class="el-icon-s-grid" style="margin-left: 5px;">数据列表</i>
					<el-button type="primary" @click="addtask=true" style="margin-left: 760px;">新增</el-button>

				</el-row>

			</table>

			<el-table :data="tableData" tooltip-effect="dark" style="width: 100%" >

			
				<el-table-column prop="propertyId" label="编号" width="130px">
				</el-table-column>
				<el-table-column prop="propertyName" label="类型名称" width="130px">
				</el-table-column>
				<el-table-column prop="sort.sortName" label="适用商品大类" width="130px">
				</el-table-column>
				<el-table-column prop="propertyNum" label="属性数量" width="130px">
				</el-table-column>
				<el-table-column prop="propertyStatus" :formatter="coachSexStatus" label="状态" width="130px">
				</el-table-column>

				<el-table-column prop="name" label="操作" width="250">
					<template slot-scope="scope">
						<el-button type="text" @click="openParameter(scope.row)">参数列表</el-button>
						<el-button type="text" @click="updateProper(scope.row)">修改</el-button>
						<el-button type="text" @click="delProperty(scope.row.propertyId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div>
				<el-pagination :current-page="bbb.pageParam.indexPage" @current-change="changePage" background layout="prev, pager, next"
				 :total="total" :page-size="bbb.pageParam.size">
				</el-pagination>
			</div>


			<el-dialog title="新增属性" :visible.sync="addtask" @close="clearfrom">
				<el-form :model="addPropertyParam" label-width="100px" class="demo-ruleForm">
					<el-row>
						<el-form-item label="类型名称" prop="name" style="width: 400px;">
							<el-input v-model="addPropertyParam.propertyName"></el-input>
						</el-form-item>
					</el-row>

					<el-row>
						<el-form-item label="适用商品大类" prop="name" style="width: 400px;">
							<el-select v-model="addPropertyParam.sortId" placeholder="请选择">
								<el-option v-for="st in sort" :value="st.sortId" :label="st.sortName" v-text="st.sortName"></el-option>

							</el-select>
						</el-form-item>
					</el-row>


					<el-row>
						<el-form-item label="是否启用" prop="name" style="width: 200px;">
							<el-select v-model="addPropertyParam.propertyStatus" placeholder="请选择" style="width: 12.5rem" >
								<el-option label="启用" value="0"></el-option>
								<el-option label="停用" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-row>

					<el-row>
						<el-form-item label="配件" prop="name" style="width: 400px;">
							<el-input v-model="addPropertyParam.propertyFittings"></el-input>
						</el-form-item>
					</el-row>

				</el-form>
				<div align="center">
					<el-button @click="clearfrom">清空</el-button>
					<el-button type="primary" @click="addProperty">保存</el-button>
				</div>

			</el-dialog>
		</div>

		<el-dialog title="修改属性" :visible.sync="deltask" @close="clearfrom">

			<el-form :model="addPropertyParam" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-form-item label="编号" prop="name" style="width: 400px;">
						<el-input v-model="updatePropertyParam.propertyId" :disabled="true">{{updatePropertyParam.propertyId}}</el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="类型名称" prop="name" style="width: 400px;">
						<el-input v-model="updatePropertyParam.propertyName"></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="是否启用" prop="name" style="width: 200px;">
						<el-select v-model="updatePropertyParam.propertyStatus" placeholder="请选择" style="width: 12.5rem" >
							<el-option label="启用" value="0"></el-option>
							<el-option label="停用" value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="适用商品大类" prop="name" style="width: 400px;">
						<el-select v-model="updatePropertyParam.sortId" placeholder="请选择">
							<el-option v-for="st in sort" :value="st.sortId" v-text="st.sortName"></el-option>
						</el-select>
					</el-form-item>
				</el-row>

			</el-form>
			<div>
				<el-button @click="clearfrom">清空</el-button>
				<el-button type="primary" @click="updaeProperty">保存</el-button>
			</div>
		</el-dialog>


		<!-- 参数列表	 -->
		<div>
			<el-dialog title="参数列表" :visible.sync="dialogTableVisible" width="70%">
				<table border="0px">
					<el-row>
						<i class="el-icon-search" style="margin-left: 5px;;">筛选查询</i>
						<el-input placeholder="请输入类型名称查询" v-model="ccc.parameterName" style="width: 200px;margin-left:590px;"></el-input>
						&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" @click="selectParameter">查询</el-button>
					</el-row>
					<el-divider></el-divider>
				</table>
				<table border="0px">
					<el-row>
						<i class="el-icon-s-grid" style="margin-left: 5px;">数据列表</i>
						<el-button type="primary" @click="addParameter=true" style="margin-left: 810px;">新增</el-button>
					</el-row>
				</table>

				<el-table ref="multipleTable" :data="parameterData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="100"></el-table-column>
					<el-table-column prop="parameterId" label="编号" width="160px">
					</el-table-column>
					<el-table-column prop="parameterName" label="参数名称" width="170px">
					</el-table-column>
					<el-table-column prop="parameterType" label="参数是否可选" width="170px">
					</el-table-column>
					<el-table-column prop="parameterWay" label="录入方式" width="150px">
					</el-table-column>
					<el-table-column prop="sizeName" label="可选值列表" width="170px">
					</el-table-column>
					<el-table-column prop="name" label="操作" width="250">
						<template slot-scope="scope">
							
							<el-button type="text" @click="updateParame(scope.row)">修改</el-button>
							<el-button type="text" @click="delParameter(scope.row.parameterId)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- <div>
					<el-pagination :current-page="ccc.pageParam.indexPage" @current-change="changePage" background layout="prev, pager, next"
					 :total="total1" :page-size="ccc.pageParam.size">
					</el-pagination>
				</div> -->
				
				
				
			</el-dialog>
			

		</div>
		<el-dialog title="新增参数" :visible.sync="addParameter" @close="clearfrom">
			<el-form :model="getOneParameter" label-width="100px" class="demo-ruleForm">
				
				<el-row>
					<el-form-item label="参数名称" prop="name" style="width: 400px;">
						<el-input v-model="getOneParameter.parameterName"></el-input>
					</el-form-item>
				</el-row>

				<el-row>
					<el-form-item label="属性是否可选" prop="name" style="width: 400px;">
						<el-radio-group v-model="getOneParameter.parameterType">
							<el-radio label="唯一属性">唯一属性</el-radio>
							<el-radio label="单选属性">单选属性</el-radio>
							<el-radio label="复选属性">复选属性</el-radio>
						</el-radio-group>
						</el-select>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="录入方式" prop="name" style="width: 400px;">
						<el-input v-model="getOneParameter.parameterWay"></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="规格" prop="name" style="width: 200px;">
						<el-input type="textarea" :rows="2" placeholder="规格参数以,隔开"  v-model="zname">
						</el-input>
					</el-form-item>
				</el-row>

			</el-form>
			<div align="center">
				<el-button @click="clearfrom">清空</el-button>
				<el-button type="primary" @click="oneParameter">保存</el-button>
			</div>

		</el-dialog>
		
		
		
		<el-dialog title="修改参数" :visible.sync="updatePt" @close="clearfrom">
			<el-form :model="updateParameter" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-form-item label="编号" prop="name" style="width: 400px;">
						<el-input v-model="updateParameter.parameterId" :disabled="true">{{updateParameter.parameterId}}</el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="参数名称" prop="name" style="width: 400px;">
						<el-input v-model="updateParameter.parameterName">{{updateParameter.parameterName}}</el-input>
					</el-form-item>
				</el-row>
		
				<el-row>
					<el-form-item label="属性是否可选" prop="name" style="width: 400px;">
						<el-radio-group v-model="updateParameter.parameterType">
							<el-radio label="唯一属性">唯一属性</el-radio>
							<el-radio label="单选属性">单选属性</el-radio>
							<el-radio label="复选属性">复选属性</el-radio>
						</el-radio-group>
						</el-select>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="录入方式" prop="name" style="width: 400px;">
						<el-input v-model="updateParameter.parameterWay">{{updateParameter.parameterWay}}</el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="规格" prop="name" style="width: 200px;">
						<el-input type="textarea" :rows="2" placeholder="规格参数以,隔开"  v-model="zname">
						</el-input>
					</el-form-item>
				</el-row>
		
			</el-form>
			<div align="center">
				<el-button @click="clearfrom">清空</el-button>
				<el-button type="primary" @click="setParameter">保存</el-button>
			</div>
		
		</el-dialog>
	</div>






</template>

<script>
	export default {
		name: 'GoodProperty',
		data() {
			return {
				siaeNameList:[],
				zname:null,
				//参数列表分页
				ccc: {
					pageParam: {
						indexPage: 1,
						size: 10
					},
					parameterName: null
				},
				dialogTableVisible: false,
				//参数列表查询
				parameterData: [],
				//新增参数
				getOneParameter: {
					parameterName: null,
					parameterType: null,
					parameterWay: null,
					sizeName: [],
					propertyId:null
				},
				//修改参数
				updateParameter: {
					parameterId: null,
					parameterName: null,
					parameterType: null,
					parameterWay: null,
					sizeName: []
				},
				sort: null,
				tStatus: null,
				//新增属性关联大类id
				status: [

					{
						value: 1,
						label: "箱包"
					},
					{
						value: 2,
						label: "珠宝首饰"
					},
					{
						value: 3,
						label: "钟表"
					},
					{
						value: 4,
						label: "服饰"
					}
				],
				property: [],
				bbb: {
					pageParam: {
						indexPage: 1,
						size: 5
					},
					propertyName: null
				},
				updatePt:false,
				addParameter:false,
				addtask: false,
				deltask: false,
				radio: null,
				addPropertyParam: {
					propertyName: null,
					sortId: null,
					propertyStatus: null,
					propertyFittings: null,
				},
				updatePropertyParam: {
					propertyId: null,
					propertyName: null,
					propertyStatus: null,
					sortId: null
				},

				delparam: {

				},
				selects: [],
				total: 0,
				total1: 0,
				tableData: [],
				multipleSelection: []

			}
		},
		methods: {
			//修改参数
			setParameter(){
				console.log(1111)
				this.getOneParameter.sizeName=this.zname.split(',');
				this.$http.post("/pawnbackgroundsystem/parameter/updateParameter",this.updateParameter).then((resp) => {
									
									if (resp.data.coed == '2002') {
										this.$message({
											message: '修改成功',
											type: 'success'
										});
										this.updatePt=false,
										this.selectParameter();
									}
								})
			},
			//新增参数
			oneParameter() {
				this.getOneParameter.sizeName=this.zname.split(',');
				
				console.log(this.getOneParameter.sizeName);
				this.$http.post("/pawnbackgroundsystem/parameter/add",this.getOneParameter).then((resp) => {
									
									if (resp.data.coed == '2002') {
										this.$message({
											message: '新增成功',
											type: 'success'
										});
										this.addParameter=false,
										this.selectParameter();
									}
								})
			},
			//参数列表点击跳转
			openParameter(Parameter) {
				this.dialogTableVisible = true;
				this.getOneParameter.propertyId=Parameter.propertyId;
				
			},
			//删除参数
			delParameter(parameterId) {
				console.log(parameterId);
				this.$http.get("/pawnbackgroundsystem/parameter/del?parameterId=" + parameterId).then((resp) => {
					console.log(resp);
					if (resp.data.coed == '2002') {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.selectParameter();
					}
				})
			},

			//传递参数当前行参数
			updateParame(index) {

				this.updateParameter.parameterId = index.parameterId;
				this.updateParameter.parameterName=index.parameterName;
				this.updateParameter.parameterWay=index.parameterWay;
				this.updateParameter.znane=index.zname;
				this.updatePt = true;
				
				this.$http.get("/pawnbackgroundsystem/parameter/getSizeName?parameterId=" + index.parameterId).then((resp) => {
					if (resp.data.coed == '2002') {
						
						this.zname=resp.data.data;
					
						
					}
				})
				
				
				
			},

			//修改状态显示
			coachSexStatus: function(row, column) {
				let updateSex = "";
				if (row.propertyStatus == 0) {
					updateSex = "启用";
					return updateSex;
				} else if (row.propertyStatus == 1) {
					updateSex = "停用";
					return updateSex;
				}
			},
			getSorts() {
				this.$http.get("/pawnbackgroundsystem/property/getSort").then((resp) => {

					// console.log(resp)
					if (resp.data.coed == '2002') {
						this.sort = resp.data.data;


					}
				})
			},
			//当前行参数传递
			updateProper(index) {
				console.log(index);
				this.updatePropertyParam.propertyId = index.propertyId;
				this.updatePropertyParam.propertyName=index.propertyName;
				this.deltask = true
			},

			//修改属性
			updaeProperty() {
				this.$http.post("/pawnbackgroundsystem/property/updateProperty", this.updatePropertyParam).then((resp) => {
					this.deltask = false;
					console.log(resp)
					if (resp.data.coed == '2002') {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.select();
					}
				})
			},
			//新增属性
			addProperty() {
				this.$http.post("/pawnbackgroundsystem/property/add", this.addPropertyParam).then((resp) => {
					this.addtask = false;
					if (resp.data.coed == '2002') {
						this.$message({
							message: '新增成功',
							type: 'success'
						});
						this.select();
					}
				})
			},
			//删除属性
			delProperty(propertyId) {
				this.$http.get("/pawnbackgroundsystem/property/deleteProperty?propertyId=" + propertyId).then((resp) => {
					console.log(resp);
					if (resp.data.coed == '2002') {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.select();
					}
				})
			},
			//修改属性
			addleave() {

			},
			//参数列表分页查询
			selectParameter() {
				this.$http.post("/pawnbackgroundsystem/parameter/selectParameter", this.ccc).then((resp) => {
									console.log(resp)
									this.parameterData = resp.data.data.records;
									this.total1 = resp.data.data.total;
									this.ccc.pageParam.indePage = resp.data.data.current;
				
				})
			},

			select() {
				this.$http.post("/pawnbackgroundsystem/property/selectProperty", this.bbb).then((resp) => {
					console.log(resp)
					this.tableData = resp.data.data.records;
					this.total = resp.data.data.total;
					this.bbb.pageParam.indePage = resp.data.data.current;

				})
			},

			changePage(index) {
				this.bbb.pageParam.indexPage = index;
				this.select();
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			clearfrom() {
				this.addPropertyParam = {
						propertyName: null,
						sortId: null,
						propertyStatus: null,
						propertyFittings: null,
					},
					this.getOneParameter = {
						parameterName: null,
						parameterType: null,
						parameterWay: null,
						sizeName: null
					},
					this.updateParameter.parameterName=null;
					this.updateParameter.parameterType=null;
					this.updateParameter.parameterWay=null;
					this.updateParameter.sizeName=null;
					this.zname=null
					
					
				
			}
		},
		created() {
			this.select();
			this.getSorts();
			this.selectParameter();
		}

	}
</script>

<style>
</style>
